<style>
 .btn {
    margin-bottom: 5px;
}
</style>
<div ui-view="" class="fade-in ng-scope"><div class="bg-light lter b-b wrapper-md ng-scope">
  <h1 class="m-n font-thin h3" translate="forms.button.name"></h1>
</div>
<div class="wrapper-md ng-scope">
	<div class="row">
		<!--按钮颜色-->
		<div class="col-sm-6">
            <div class="panel panel-default">
            	<!--面板标题-->
                <div class="panel-heading font-bold" translate="forms.button.color"></div>
                <div class="panel-body">
                    <p>1、可使用class来快速改变按钮的颜色，如<code>.btn-primary</code></p>
                    <div class="font-bold">普通按钮</div>
                    <p>
                        <button type="button" class="btn btn-default">btn-default</button>
                        <button type="button" class="btn btn-primary">btn-primary</button>
                        <button type="button" class="btn btn-success">btn-success</button>
                        <button type="button" class="btn btn-info">btn-info</button>
                        <button type="button" class="btn btn-warning">btn-warning</button>
                        <button type="button" class="btn btn-danger">btn-danger</button>
                        <button type="button" class="btn btn-dark">btn-dark</button>
                        <button type="button" class="btn btn-link">btn-link</button>
                    </p>
                    <p>2、可在app.css中配置按钮的颜色，如<code>.btn-primary{color: #ffffff ;background-color: #3a5ddf;}</code></p>
                    <div class="font-bold">普通按钮</div>
                    <p>
                        <button type="button" class="btn btn-default">btn-default</button>
                        <button type="button" class="btn btn-primary">btn-primary</button>
                    </p>
                </div>
            </div>
        </div>
        <!--按钮大小-->
        <div class="col-sm-6">
            <div class="panel panel-default">
            	<!--面板标题-->
                <div class="panel-heading font-bold" translate="forms.button.size"></div>
                <div class="panel-body">
                    <p>
                        1、可以通过添加class的值为<code>.btn-lg</code>, <code>.btn-sm</code>, or <code>.btn-xs</code>来修改按钮的大小
                    </p>
                    <div class="font-bold">按钮大小</div>
                    <p>
                        <button type="button" class="btn btn-primary btn-lg">大按钮</button>
                        <button type="button" class="btn btn-default btn-lg">大按钮</button>
                        
                        <button type="button" class="btn btn-primary">默认按钮</button>
                        <button type="button" class="btn btn-default">默认按钮</button>
                        <br>
                        <button type="button" class="btn btn-primary btn-sm">小按钮</button>
                        <button type="button" class="btn btn-default btn-sm">小按钮</button>
                        
                        <button type="button" class="btn btn-primary btn-xs">Mini按钮</button>
                        <button type="button" class="btn btn-default btn-xs">Mini按钮</button>
                    </p>
                    <p>
                       2、添加class的值为<code>.btn-block</code>来显示块级按钮，块级按钮会横跨父元素的全部宽度
                    </p>
                    <div class="font-bold">块级按钮</div>
                    <p>
                        <button type="button" class="btn btn-block btn-primary">这是一个块级按钮</button>
                    </p>
                </div>
            </div>
        </div>        
	</div>
	<div class="row">
		<!--常用图标按钮-->
		<div class="col-sm-6">
            <div class="panel panel-default">
            	<!--面板标题-->
                <div class="panel-heading font-bold" translate="forms.button.icon"></div>
                <div class="panel-body">
                    <p>
                        要使用图标按钮，可添加class，如<code>.fa-search</code>
                    </p>
                    <div class="font-bold">常用图标按钮</div>
                    <p>
                        <button type="button" class="btn btn-default"><i class="fa fa-search"></i>查询</button>
                        <button type="button" class="btn btn-primary"><i class="fa fa-plus"></i>新增</button>
                        <button type="button" class="btn btn-success"><i class="fa fa-pencil"></i>修改</button>
                        <button type="button" class="btn btn-info"><i class="fa fa-trash-o"></i>删除</button>
                        <button type="button" class="btn btn-warning"><i class="fa fa-refresh"></i>重置</button>
                        <button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-cog"></i>设置</button>
                        <button type="button" class="btn btn-dark"><i class="icon-bell fa-fw"></i></button>                
                    </p>                                      
                </div>
            </div>
        </div>
        <!--按钮状态-->
        <div class="col-sm-6">
            <div class="panel panel-default">
            	<!--面板标题-->
                <div class="panel-heading font-bold" translate="forms.button.statu"></div>
                <div class="panel-body">
                    <p>
                        添加<code>.active</code>class来显示激活，添加 <code>disabled</code>属性禁用按钮
                    </p>

                    <div class="font-bold">按钮状态</div>
                    <p>                        
                        <button type="button" class="btn btn-default">普通按钮</button>
                        <button type="button" class="btn btn-primary active">激活按钮</button>
                        <button type="button" class="btn btn-success" disabled="disabled">禁用按钮</button>                                               
                    </p>
                </div>
            </div>
        </div>		
	</div>	
</div>